<template>
	<view class="newSearch">
		<input type="text" placeholder="请输入你想知道的冷知识" v-model="str">

		<view class="search-result">
			<view v-for="(item,index) in searchArr" :key="index" class="li" @click="toArticle(item.objectId)">
				<view class="agopages-img">
					<image :src="item.topImage.url" />
				</view>
				<view class="agopages-text">
					<p>{{ item.title }}</p>
					<text>{{ item.body }}</text>
				</view>

			</view>
			
		</view>

		<view class="search-text">
			<p>大家都在搜</p>
			<view v-for="item in textArr" :key="item.objectId" @click="getWord(item.word)" class="hotWord">
				{{ item.word }}

			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				textArr: "",
				str: "",
				searchArr: "",
			}
		},
		methods: {
			getData() {
				uni.request({
					url: `http://cloud.agopage.com/6b83fd3bc06260ec/mostSearch`,
					success: ({
						data
					}) => {
						this.textArr = data.mostSearchs;
					}
				})

			},

			getRecommend(word) {
				uni.request({
					url: `http://cloud.agopage.com/6b83fd3bc06260ec/search?keyword=${word}`,
					success: ({
						data
					}) => {
						
						this.searchArr = data.agopages;
					}
				})

			},
			getWord(word) {
				this.str = word;
			},
			toArticle(id) {
				uni.navigateTo({
					url: `/pages/article/article?id=${id}`
				})
			},
		},
		watch: {
			str(curVal) {
				if (curVal == "") {
					this.searchArr = "";
				} else {
					// 实现input连续输入，只发一次请求
					clearTimeout(this.timeout);

					this.timeout = setTimeout(() => {
						this.getRecommend(curVal);
					}, 10);
				}
			},
		},

		mounted() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.newSearch {
		input {
			border: 1px solid #ccc;
			border-radius: 999px;
			height: 30px;
			width: 90vw;
			margin-left: 5vw;
			position: absolute;
			top: 30px;
			text-align: center;
			line-height: 50px;
		}

		.search-result {
			position: absolute;
			width: 99vw;

			top: 65px;
			background-color: #fff;

			.li {
				display: flex;
				justify-content: space-between;
				width: 90vw;
				height: 100px;
				margin: 10px auto;
				border-bottom: 1px solid #ccc;
			}

			.agopages-img {
				width: 32vw;

				image {
					width: 100%;
					height: 80px;
					border-radius: 15px;
				}
			}

			.agopages-text {
				width: 54vw;

				p {
					color: #ccc;
					font-size: 14px;
					font-weight: 600;
					overflow: hidden;
					/*内容超出后隐藏*/
					text-overflow: ellipsis;
					/* 超出内容显示为省略号 */
					white-space: nowrap;
					/* 文本不进行换行 */
					padding-top: 5px;
				}

				text {
					font-size: 12px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					padding-top: 8px;
				}
			}
		}

		.search-text {
			position: absolute;
			z-index: -3;
			top: 75px;

			p {
		 	margin-left: 25px;
			}
		}

		.hotWord {
			color: rgba(62, 173, 62, 0.731);
			font-size: 14px;
			float: left;
			margin-top: 15px;
			margin-left: 15px;
		}
	}
</style>
